<!--
    用于展示附件列表
 -->
<template>
  <JYWPDialog
    :visible="visible"
    show-close
    title="附件"
    width="596px"
    top="15vh"
    @close="close"
  >
    <!-- 4 === 2.7 -->
    <div class="attachament_container">
      <div v-for="(v,i) in attachment" :key="i" class="attachament">
        <div class="attachament_wrapper">
          <div class="attachament_head">
            <template v-if="(isImg(v.suffix ))">
              <el-image
                style="width: 100%; height: 100%"
                :src="v.url"
                fit="cover"
                :preview-src-list="[v.url]"
                :z-index="7000"
              />
              <!-- <img class="attachment_head--img" :src="v.url" alt=""> -->
            </template>
            <template v-else>
              <span> {{ v.suffix }} </span>
            </template>
          </div>
          <div class="attachament_body">
            <div>
              <img
                src="../../assets/project/icons/down.png"
                width="20px"
                height="20px"
                :alt="v.name"
                @click="downLoad(v.url)"
              >
            </div>
          </div>
        </div>

        <div class="attachment_footer">
          <span>{{ v.name }}</span>
        </div>
      </div>

    </div>
    <template #footer>
      <el-button size="mini" type="primary" @click="close">
        关闭
      </el-button>
    </template>
  </JYWPDialog>
</template>

<script>
import { stringifyToArr, } from '@/filters';
import { mapMutations, mapState, } from 'vuex';
export default {
  name: 'Attachment',
  components: {},
  filters: {

  },
  props: {
    visible: Boolean,
  },
  data() {
    return {};
  },
  computed: {
    ...mapState('project/index', {
      value: (v) => {
        return stringifyToArr(v['attachment']);
      },
    }),
    attachment() {
      const val = [];
      const suffix_reg = /\.([0-9a-z]+)(?:[\?#]|$)/i;
      for (const i of this.value) {
        val.push({
          name: i.name.replace(suffix_reg, ''),
          suffix: i.name.match(suffix_reg)[1],
          url: process.env.VUE_APP_AUDIO_BASE_URL + i.url,
        });
      }
      return val;
    },

  },
  mounted() {},
  methods: {
    ...mapMutations('project/index', ['SET_IMPOSE_OPTIONS']),
    close() {
      this.$emit('update:visible', false);
      this.SET_IMPOSE_OPTIONS({ name: 'attachment', visible: false, });
    },
    isImg(fix) {
      const imgReg = /(JPG|PNG|GIF|JPEG)/i;
      return imgReg.test(fix);
    },
    downLoad(url) {
      window.open(url, '_blank');
    },
  },
};
</script>
<style lang='scss' scoped>
.attachament_container{
 display: flex;
 flex-direction: row;
.attachament {
  width: 127px;
  display: flex;
  flex-direction: column;
  margin: 0 0 20px 20px;
  > .attachament_wrapper {
    background: #d7e5f9;
    overflow: hidden;
    border-radius: 4px;
    height: 135px;
    position: relative;

    > .attachament_head {
      height: 100%;
      text-align: center;
      line-height: 108px;
      > span {
        display: inline-block;
        // transform: scale(2.7);
        font-weight: 600;
        color: #1890ff;
      }
      >.attachment_head--img{
        height: 100%;
        object-fit: cover;
        width: 100%;
      }
    }
    > .attachament_body {
      height: 27px;
      background-color: rgba(96, 155, 239, 0.6);
      // text-align: center;
      display: flex;
      flex-direction: row;
      justify-content: center;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      > div {
        flex: 1;
        display:flex;
        align-items: center;
        justify-content: center;
        > img{
          cursor: pointer;
        }
      }
    }
  }
  > .attachment_footer {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

    margin-top: 6px;
    color: #575757;
    font-size: 14px;
  }
}
}
</style>
